<template>
	<LayoutTableBox :sizePx="cardWidth">
		<template #card>
			<TreeFilter
				title="部门列表"
				label="name"
				:requestApi="getUserDepartment"
				:defaultValue="treeFilterValues.departmentId"
				@change="changeTreeFilter"
			/>
		</template>
		<template #selectFilter>
			<div class="card select-box">
				<SelectFilter :data="selectFilterData" :defaultValues="selectFilterValues" @change="changeSelectFilter" />
			</div>
		</template>
		<template #proTable>
			<ProTable
				ref="proTable"
				:columns="columns"
				:requestApi="getUserList"
				:initParam="Object.assign(treeFilterValues, selectFilterValues)"
				printTitle="打印标题"
			>
				<!-- 表格 header 按钮 -->
				<template #tableHeader>
					<el-button type="primary" plain @click="openDrawer('新增')">新增用户</el-button>
					<el-button type="primary" plain @click="batchAdd">批量添加用户</el-button>
					<el-button type="primary" plain @click="downloadFile">导出用户数据</el-button>
				</template>
				<!-- 表格操作 -->
				<template #operation="scope">
					<el-button type="primary" link @click="openDrawer('查看', scope.row)">查看</el-button>
					<el-button type="primary" link @click="openDrawer('编辑', scope.row)">编辑</el-button>
					<el-button type="primary" link @click="resetPass(scope.row)">重置密码</el-button>
					<el-button type="danger" link @click="deleteAccount(scope.row)">删除</el-button>
				</template>
			</ProTable>
			<UserDrawer ref="drawerRef" />
			<ImportExcel ref="dialogRef" />
		</template>
	</LayoutTableBox>
</template>
<script setup lang="ts" name="useSelectFilter">
import { ref, reactive } from 'vue'
import { User } from '@/api/interface'
import { ElMessage } from 'element-plus'
import { ColumnProps } from '@/components/ProTable/interface'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import LayoutTableBox from '@/components/LayoutTableBox/index.vue'
import ProTable from '@/components/ProTable/index.vue'
import TreeFilter from '@/components/TreeFilter/index.vue'
import ImportExcel from '@/components/ImportExcel/index.vue'
import UserDrawer from '@/views/proTable/components/UserDrawer.vue'
import SelectFilter from '@/components/SelectFilter/index.vue'
import {
	getUserList,
	deleteUser,
	editUser,
	addUser,
	resetUserPassWord,
	exportUserInfo,
	BatchAddUser,
	getUserDepartment
} from '@/api/modules/user'
import dict from '@/utils/dict/index'

// 设置 cardWidth
const cardWidth = 300

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref()

// 表格配置项
const columns: Partial<ColumnProps>[] = [
	{ type: 'index', label: '#', width: 80 },
	{ prop: 'username', label: '用户姓名', width: 120 },
	{ prop: 'gender', label: '性别', width: 120, sortable: true, enum: dict.gender_type.value },
	{ prop: 'idCard', label: '身份证号' },
	{ prop: 'email', label: '邮箱' },
	{ prop: 'address', label: '居住地址' },
	{ prop: 'status', label: '用户状态', width: 120, sortable: true, tag: true, enum: dict.user_status.value },
	{ prop: 'createTime', label: '创建时间', width: 180, sortable: true },
	{ prop: 'operation', label: '操作', width: 250, fixed: 'right' }
]

// selectFilter 数据
const selectFilterData = [
	{
		title: '用户状态(单)',
		key: 'userStatus',
		options: [
			{
				label: '全部',
				value: ''
			},
			{
				label: '在职',
				value: '1',
				icon: 'User'
			},
			{
				label: '待培训',
				value: '2',
				icon: 'Bell'
			},
			{
				label: '待上岗',
				value: '3',
				icon: 'Clock'
			},
			{
				label: '已离职',
				value: '4',
				icon: 'CircleClose'
			},
			{
				label: '已退休',
				value: '5',
				icon: 'CircleCheck'
			}
		]
	},
	{
		title: '用户角色(多)',
		key: 'userRole',
		multiple: true,
		options: [
			{
				label: '全部',
				value: ''
			},
			{
				label: '超级管理员',
				value: '1'
			},
			{
				label: '公司CEO',
				value: '2'
			},
			{
				label: '部门主管',
				value: '3'
			},
			{
				label: '人事经理',
				value: '4'
			}
		]
	}
]

// 默认 selectFilter 参数
const selectFilterValues = ref({ userStatus: '2', userRole: ['1', '3'] })
const changeSelectFilter = (val: any) => {
	ElMessage.success('请注意查看请求参数变化 🤔')
	val.userStatus = val.userStatus.join('')
	selectFilterValues.value = val
}

// 默认 treeFilter 参数
const treeFilterValues = reactive({ departmentId: '1' })
const changeTreeFilter = (val: string) => {
	ElMessage.success('请注意查看请求参数变化 🤔')
	treeFilterValues.departmentId = val
}

// 删除用户信息
const deleteAccount = async (params: User.ResUserList) => {
	await useHandleData(deleteUser, { id: [params.id] }, `删除【${params.username}】用户`)
	proTable.value.getTableList()
}

// 重置用户密码
const resetPass = async (params: User.ResUserList) => {
	await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
	proTable.value.getTableList()
}

// 导出用户列表
const downloadFile = async () => {
	useDownload(exportUserInfo, '用户列表', proTable.value.searchParam)
}

// 批量添加用户
const dialogRef = ref()
const batchAdd = () => {
	let params = {
		title: '用户',
		tempApi: exportUserInfo,
		importApi: BatchAddUser,
		getTableList: proTable.value.getTableList
	}
	dialogRef.value.acceptParams(params)
}

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref()
const openDrawer = (title: string, rowData: Partial<User.ResUserList> = { avatar: '' }) => {
	let params = {
		title,
		rowData: { ...rowData },
		isView: title === '查看',
		apiUrl: title === '新增' ? addUser : title === '编辑' ? editUser : '',
		getTableList: proTable.value.getTableList
	}
	drawerRef.value.acceptParams(params)
}
</script>
